<template>
  <div class="chart-wrapper">
    <div
      class="com-chart"
      ref="device_ref"
      :style="{width: '100%' , height:'100%'}"
    ></div>
  </div>
</template>


<script>
import homeview from "@/api/homeview";
export default {
  name: "index",
  data() {
    return {
      chartInstance: null,
      allData: [],
      colorArr: [
        { color: "#e7e702" },
        { color: "#8d7fec" },
        { color: "#5085f2" },
        { color: "#FA8072" },
      ],
    };
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
  },

  methods: {
    // 初始化echartInstance对象
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.device_ref);

      const initOption = {
        legend: {
          type: "scroll",
          orient: "vertical",
          height: 250,
          left: "65%",
          top: "middle",
          textStyle: {
            color: "#8c8c8c",
          },
        },
      };
      this.chartInstance.setOption(initOption);
    },
    // 获取服务器的数据
    getData() {
      homeview
        .getUserEqu()
        .then((res) => {
          // console.log(res)

          //数据处理
          let size = res.data.result.equipment.length;
          for (let i = 0; i < size; i++) {
            var temp = {};
            temp.legendname = res.data.result.equipment[i];
            temp.name = res.data.result.equipment[i];
            temp.value = res.data.result.nums[i];
            temp.itemStyle = this.colorArr[i];
            this.allData.push(temp);
          }
          // console.log(this.allData);
          this.updateChart();
        })
        .catch((error) => {
          console.log("error");
        });
    },
    // 更新图表
    updateChart() {
      // 总设备统计
      const total = this.allData.reduce((pre, cur) => {
        return pre + cur.value;
      }, 0);
      // console.log(total);

      const dataOption = {
        title: [
          {
            text: "累计设备数",
            subtext: total,
            x: "34%",
            y: "39%",
            textStyle: {
              fontSize: 13,
              color: "#999",
            },
            subtextStyle: {
              fontSize: 26,
              color: "#333",
            },
            textAlign: "center",
          },
        ],
        series: [
          {
            type: "pie",
            data: this.allData,
            label: {
              normal: {
                show: true,
                position: "outter",
                formatter: function (params) {
                  //console.log(params)
                  return params.data.legendname;
                },
              },
            },
            center: ["35%", "50%"],
            radius: ["70%", "90%"],
            labelLine: {
              normal: {
                length: 5,
                length2: 3,
                smooth: true,
              },
            },
            // 逆时针分布
            clockwise: false,
            itemStyle: {
              borderWidth: 4,
              borderColor: "#fff",
            },
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            // console.log(params);
            const str =
              params.marker +
              params.data.legendname +
              "<br/>" +
              "数量：" +
              params.data.value;
            return str;
          },
        },
      };
      this.chartInstance.setOption(dataOption);
    },
    // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
    screenAdapter() {
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
